<template>
  <u-popup :show="show" mode="center" @close="closeHandle" bgColor="transparent">
   <view class="reload-history-modal-wrapper">
      <view
        class="main-wrapper"
        :style="{'background-image':`url(${staticImgs.bg})`}"
      >
        <view class="con">
          <view class="con-row-1">预购成功</view>
          <view class="con-row-2">
            <view>恭喜你已预约成功</view>
            <!-- <view>授权订阅通知</view> -->
            <view>测评上线后将第一时间通知你~</view>
          </view>
        </view>
        <view class="btn-wrapper"
          @click="closeHandle"
        >
           我知道了
        </view>
        
        
      </view>
    </view>
  </u-popup>
</template>

<script>
  
  import {
    debounce
  } from 'lodash'
  
  export default{
    props:{
      visible:{
        type:Boolean,
        default:false
      }
    },
    data(){
      return {
        show:false,
        goodsInfo:{},
        staticImgs:{
          bg: this.imgBaseURL + '/scl/result/multipack/mbti/modal-2-bg.png',
          btnBg: this.imgBaseURL + '/scl/result/multipack/mbti/appointment-modal-btn-bg.png',
          closeIcon: this.imgBaseURL + '/scl/result/multipack/mbti/close-icon.png',
        },
        pageLoading:false,
      }
    },
    watch:{
      visible:{
        handler(val){
          console.log(val,'===================== reloadHistoryVisible')
          this.show = val
          if(val){
            this.getGoodsData()
          }
        },
        immediate:true
      },
      priceNow:{
        handler(val){
          console.log(val,'===================== priceNow')
        },
        immediate:true
      }
    },
    methods:{
      async getGoodsData(){
        const {data:dRes} = await this.$u.api.selectByCode({
          code:"scl_mbti_character"
        })
        this.goodsInfo = dRes.data
        this.goodsInfo.appointmentNum = JSON.parse(dRes.data.description).num
        
        console.log(this.goodsInfo,'-----this.goodsInfo')
        console.log(dRes,'--------------dRes-----------')
      },
      confirmHandle(){
        this.show = false
        
        const that = this
        const arr = ['kS6Pv8CfxnvymlvGpaCsJQq6ZyZPlxfgYtpN-XsPAbc', 'vCE099DZ0enVm-Cu-UdM5nGaowmksDgFLrIyDq_WvrI','B_V0gJKuxQuZrl67pXV5d01aMMoCRRvDKdwfo2ETzbk']
        uni.getSetting({ //getSetting获取用户的当前设置
          withSubscriptions: true,
          success: res => {
            console.log('res >>>>', res);
            if (res.subscriptionsSetting.mainSwitch && 
              res.subscriptionsSetting && 
              res.subscriptionsSetting[arr[0]] == 'accept' && 
              res.subscriptionsSetting[arr[1]] == 'accept' && 
              res.subscriptionsSetting[arr[2]] == 'accept')
            {
              that.toPay()
            } else {
              uni.requestSubscribeMessage({
                tmplIds: arr,
                success(res) {
                  console.log('成功');
                  that.toPay()
                },
                fail(res) {
                  console.log('失败');
                  that.toPay()
                }
              })
            }
          }
        })
        
      },
      toPay:debounce(function(){
        if (this.pageLoading) {
          return false
        }
        uni.showLoading({
          title:"请求支付中"
        })
        let that = this;
        this.pageLoading = true
        this.$u.api.orderPay({
          orderType:15
        }).then(res => {
          if (res.data.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              service: 5,
              orderInfo: res.data.data.wr,
              timeStamp: res.data.data.wr.timeStamp,
              nonceStr: res.data.data.wr.nonceStr,
              package: res.data.data.wr.packageValue,
              signType: res.data.data.wr.signType,
              paySign: res.data.data.wr.paySign,
              success: function(res) {
                that.$emit('confirm')
                that.pageLoading = false
              },
              fail: function(err) {
                console.log(err, '测评支付2')
                that.$showToast('支付取消');
                that.pageLoading = false
              }
            });
          } else {
            that.$showToast(res.data.message);
            this.pageLoading = false
          }
        }).catch(() => {
          this.pageLoading = false
        }).finally(() => {
          uni.hideLoading()
        })
      },300),
      closeHandle(){
        console.log('------closeHandle-------')
        this.show = false
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .reload-history-modal-wrapper{
    
    .close-icon{
      position: absolute;
          top: 198rpx;
          right: 12rpx;
    }
    
    .main-wrapper{
      background-repeat: no-repeat;
      background-size: contain;
      
      width: 600rpx;
      height: 594rpx;
      box-sizing: border-box;
      // padding-top: 464rpx;
      
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
      
      .btn-wrapper{
        width: 330rpx;
        height: 95rpx;
        background: linear-gradient( 180deg, #6F47DD 0%, #3C22B8 100%);
        border-radius: 48rpx;
        
        // margin: auto;
        position: relative;
        margin-bottom: 30rpx;

        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 95rpx;
        text-align: center;
        font-style: normal;
        

        
        
      }
      
      .text-info-box{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 25rpx;
        color: #A997F1;
        line-height: 36rpx;
        margin-top: 12rpx;
        margin-bottom: 76rpx;
        letter-spacing: 1px;
        text-align: center;
        font-style: normal;
      }
      
      .con{
        width: fit-content;
        position: relative;        
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-bottom: 28rpx;
        // display: flex;
            flex-direction: column;
    align-items: center;

        
        .con-row-1{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 40rpx;
          color: #290F89;
          line-height: 56rpx;
          letter-spacing: 2px;
          text-align: center;
          font-style: normal;

          margin: auto;
          margin-bottom: 10rpx;
          // width: 186rpx;
          

        
        }
        
        .con-row-2{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #2B108C;
          line-height: 50rpx;
          letter-spacing: 1px;
          text-align: center;
          font-style: normal;
          
          margin-bottom: 10rpx;
        }
        
        
        .tip-text{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #FFFFFF;
          line-height: 37rpx;
          text-align: left;
          font-style: normal;
              margin-bottom: 20rpx;

        }
        .price-box{
          display: flex;
              align-items: flex-end;
                  margin-left: 10rpx;


          
          .unit{
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 50rpx;
            color: #FFFFFF;
            line-height: 70rpx;
            text-align: left;
            font-style: normal;
            margin-bottom: 10rpx;
          }
          
          .num{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 80rpx;
            color: #FFFFFF;
            line-height: 112rpx;
            text-align: left;
            font-style: normal;
          }
        }
        
        
      }
      .btn-group{
        display: flex;
        justify-content: center;
        column-gap: 22rpx;
        
        .btn-box{
          width: 230rpx;
          height: 70rpx;
          
          border-radius: 35rpx;
          line-height: 70rpx;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: #FFFFFF;
          // line-height: 42rpx;
          text-align: center;
          font-style: normal;
          
        }
        
        .retest-btn{
          
          
          background: linear-gradient( 180deg, #FFD580 0%, #DB9B38 100%);
          
        }
        .report-btn{
          background: linear-gradient( 180deg, #73D48F 0%, #5ABB40 100%);
        }
        
        
      }
    }
    
  }             
</style>